<template>
  <div class="role">
    <div class="search-form">
      <search-form :searchFormConfig="searchFormConfig" @newSearchEvent="handlerSearch"></search-form>
    </div>
    <page-table
      ref="pageTableRef"
      :pageTabelConfig="pageTabelConfig"
      pageName="Role"
      @pageTableEvent="handlerDialog"
      @showEmptyDialog="handlerDialog"
    ></page-table>

    <!-- dialog对话框 -->
    <page-dialog :editDialogFormConfig="editDialogFormConfig" pageName="Role" ref="pageDialogRef" :otherInfo="otherInfo">
      <div class="tree">
        <el-tree
          ref="elTreeRef"
          node-key="id"
          :data="$store.state.login.userMenu"
          :default-checked-keys="checkedList"
          :props="{ children: 'children', label: 'name' }"
          show-checkbox
          @check="treeChange"
        />
      </div>
    </page-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, nextTick, watch } from "vue"
import PageTable from "@/components/page-table"
import { pageTabelConfig } from "./config/tabel.config"

import SearchForm from "@/components/page-search"
import { searchFormConfig } from "./config/search.config"

import { pageTableRef, handlerSearch } from "@/hook/usePageSearch"

import { editDialogFormConfig } from "@/views/main/system/role/config/editDialog.config"

import { pageDialogRef } from "@/hook/usePageDialog"

import PageDialog from "@/components/page-dialog"

import { getSubMenuId } from "@/utils/map-menus"
import { ElTree } from "element-plus"
import mitter from "@/utils/miit"
export default defineComponent({
  name: "role",

  components: {
    PageTable,
    SearchForm,
    PageDialog,
  },
  setup() {
    const otherInfo = ref({})

    // 默认选中的列表
    const checkedList = ref([])
    const treeChange = (data1: any, data2: any) => {
      const { checkedNodes, halfCheckedNodes } = data2
      // 合并Id
      const menuList: any = []
      checkedNodes.forEach((item: any) => {
        menuList.push(item.id)
      })
      halfCheckedNodes.forEach((item: any) => {
        menuList.push(item.id)
      })
      otherInfo.value = { menuList }
    }

    const elTreeRef = ref<InstanceType<typeof ElTree>>()
    const handlerDialog = (row: any) => {
      // 接收数据
      console.log("PageDialog接受了事件")
      console.log(row)
      // 如果有数据,表明需要展示到dialog对话框上
      if (row.id) {
        // 获取权限id
        const lists = getSubMenuId(row.menuList)

        const fn = pageDialogRef.value?.dialogShowRowDate()
        if (fn instanceof Function) {
          // 监听dom元素变化,
          watch(
            () => elTreeRef.value,
            (newValue) => {
              elTreeRef.value?.setCheckedKeys(lists, false)
            },
          )
          // 发出事件
          fn(row)
        }
      } else {
        watch(
          () => elTreeRef.value,
          (newValue) => {
            elTreeRef.value?.setCheckedKeys([], false)
          },
        )
        const fn = pageDialogRef.value?.showEmptyDialog()
      }
    }
    console.log("最后数组")
    return {
      pageTabelConfig,
      searchFormConfig,
      pageTableRef,
      handlerSearch,
      editDialogFormConfig,
      pageDialogRef,
      handlerDialog,
      treeChange,
      otherInfo,
      checkedList,
      elTreeRef,
    }
  },
})
</script>

<style scoped>
.search-form {
  background-color: #fff;
}
.tree {
  margin-left: 20px;
}
</style>
